<!DOCTYPE html>
<html>
  {% load static %}
<head>
    <meta charset="utf-8">
    <title> {% block title %}{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css'  %}">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css'  %}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <script src="{% static 'js/echarts-all-3.js' %}"></script>
    <!-- REQUIRED SCRIPTS -->
    <!-- jQuery -->
    <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
    <script src="{% static 'js/jquery.form.min.js' %}"></script>
    <!-- Bootstrap -->
    <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
    <!-- AdminLTE -->
    <script src="{% static 'dist/js/adminlte.js' %}"></script>
    <!-- OPTIONAL SCRIPTS <script src="{% static 'js/echarts-all-3.js' %}"></script> -->
    <script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>

    <script src="{% static 'plugins/bs-custom-file-input/bs-custom-file-input.min.js' %}"></script>
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <!--三级省市地址选择器-->
    <link rel="stylesheet" href="{% static 'plugins/layui/city-picker/city-picker.css'  %}">
    <script src="{% static 'plugins/layui/city-picker/city-picker.data.js' %}"></script>
    <!--DataTables-->
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap4.min.css'  %}">
    <link rel="stylesheet" href="{% static 'plugins/ztree/css/metroStyle/metroStyle.css'  %}">
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
    <script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
    <script src="{% static 'plugins/ztree/js/jquery.ztree.all.min.js' %}"></script>
    <!-- Fullcalendar
    <link rel="stylesheet" href="{% static 'plugins/fullcalendar/main.min.css'  %}">
    <link rel="stylesheet" href="{% static 'plugins/fullcalendar-daygrid/main.min.css'  %}">
    <link rel="stylesheet" href="{% static 'plugins/fullcalendar-bootstrap/main.min.css'  %}">
    <link rel="stylesheet" href="{% static 'plugins/fullcalendar-timegrid/main.min.css'  %}">

    <script src="{% static 'plugins/fullcalendar/main.min.js' %}"></script>
    <script src="{% static 'plugins/fullcalendar-daygrid/main.min.js' %}"></script>
    <script src="{% static 'plugins/fullcalendar-timegrid/main.min.js' %}"></script>
    <script src="{% static 'plugins/fullcalendar-interaction/main.min.js' %}"></script>
    <script src="{% static 'plugins/fullcalendar-bootstrap/main.min.js' %}"></script>
    fullcalendar-->
    <!--穿梭框-->
    <link rel="stylesheet" href="{% static 'plugins/select2/css/select2.min.css'  %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css'  %}">
    <script src="{% static 'plugins/select2/js/select2.full.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/jquery.treetable.min.css'  %}">
    <script src="{% static 'js/jquery.treetable.min.js' %}"></script>
    <style>
        /*bs-custom-file*/
        .custom-file-label::after {
            content: "浏览";
        }
    </style>
</head>
<body class="hold-transition sidebar-mini layout-navbar-fixed layout-footer-fixed layout-fixed">
<div class="wrapper">
  <!-- 导航条 -->
   <!-- 导航条 -->
  <nav class="main-header navbar navbar-expand  navbar-light navbar-white">
    <!-- 导航条左侧链接-->
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-none d-sm-inline-block">
            <a href="/" class="nav-link">首页</a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <!--用户未读消息-->
        <li class="nav-item dropdown">
            {% if msg_not_read %}
            <a class="nav-link" data-toggle="dropdown" href="#">
            {% else %}
            <a class="nav-link" href="{% url 'login:show_msg' 'user' %}">
            {% endif %}
                <i class="far fa-comments"></i>
                {% if msg_not_read %}
                <span class="badge badge-danger navbar-badge"  style="right: 3px;top: 4px;">{{ msg_not_read }}</span>
                {% endif %}
        </a>
        {% if msg_from_user %}
        {% for j in msg_from_user %}
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="{% static 'images/head_pic/' %}{{ j.sender_head_pic }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                    {{ j.sender_username }}
                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">{{  j.subject }}</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> {{ j.send_time }}</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          {% endfor %}
          <a href="{% url 'login:show_msg' 'user' %}" class="dropdown-item dropdown-footer">所有消息</a>
        </div>
        {% endif %}
        </li>
        <!--/用户未读消息-->
        <!--系统未读消息-->
        <li class="nav-item dropdown">
            {% if sys_msg_not_read %}
            <a class="nav-link" data-toggle="dropdown" href="#">
            {% else %}
            <a class="nav-link" href="{% url 'login:show_msg' 'system' %}">
            {% endif %}
                <i class="far fa-bell"></i>
                {% if sys_msg_not_read %}
                <span class="badge badge-danger navbar-badge" style="right: 3px;top: 4px;">{{ sys_msg_not_read }}</span>
                {% endif %}
        </a>
        {% if msg_from_sys %}
        {% for j in msg_from_sys %}
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
            <a href="{% url 'login:show_msg' 'system' %}?mid={{ j.mid }}&read=yes" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="{{ j.sender_head_pic }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                    {{ j.sender_username }}
                  <span class="float-right text-sm text-gray"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-md">{{  j.subject }}</p>
                <p class="text-muted" style="font-size: 6px;"><i class="far fa-clock mr-1"></i> {{ j.send_time }}</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          {% endfor %}
          <a href="{% url 'login:show_msg' 'system' %}" class="dropdown-item dropdown-footer">所有消息</a>
        </div>
        {% endif %}
        </li>
        <!--/系统未读消息-->
        <!--下拉框选择-->
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
            操作
          <!--<span class="badge badge-warning navbar-badge">15</span>-->
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">快捷入口</span>
          <div class="dropdown-divider"></div>
          <a href="{% url 'login:user_pwd_modify' %}" class="dropdown-item">
            <i class="fa fa-lock mr-2"></i> 修改密码
            <span class="float-right text-muted text-sm"></span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="{% url 'login:user_modify' %}" class="dropdown-item">
            <i class="fa fa-wrench mr-2"></i> 信息更新
            <span class="float-right text-muted text-sm"></span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="{% url 'login:user_logout'  %}" class="dropdown-item">
            <i class="fa fa-arrow-circle-right mr-2"></i> 注销登录
            <span class="float-right text-muted text-sm"></span>
          </a>
        </div>
      </li>
    </ul>
  </nav>
  <!-- 左侧Sliderbar容器 -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4 ">
    <!--站点logo -->
    <a href="/" class="brand-link">
      <img src="{% static 'images/favicon.ico' %}" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">工资条发送平台</span>
    </a>
<div class="sidebar">
      <!-- Sidebar 用户面板 (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image" style="padding-top: 8px;">
            {% if request.user.head_pic %}
          <a href="javascript:;" onclick="SetupHeadPic()"><img src="{{ request.user.head_pic }}" class="img-circle elevation-2" alt="User Image"></a>
            {% else %}
          <a href="javascript:;" onclick="SetupHeadPic()"><img src="{% static 'images/head_pic/default.png' %}" class="img-circle elevation-2" alt="User Image"></a>
            {% endif %}
        </div>
        <div class="info" style="padding-top: 15px;font-size: 17px;">
          <a href="{% url 'login:user_modify' %}" class="d-block">{{ request.user.username }}</a>
        </div>
      </div>
      <!-- 页面左侧Sliderbar -->
      <nav class="mt-2 ">
        <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="false">
            <!--动态菜单-->
            {% for m in menu_data %}
            <li class="nav-item has-treeview">
                <a href="#" class="nav-link">
                    {{ m.icon|safe }}
                  <p>{{ m.name }}<i class="fas fa-angle-left right"></i></p>
                </a>
                <!--二级菜单导航-->
                <ul class="nav nav-treeview">
                    {% for m2 in m.sub %}
                    {% if not m2.sub %}
                        <li class="nav-item">
                            <a href="{{ m2.url }}" class="nav-link">
                                {{ m2.icon|safe }}<p>{{ m2.name }}</p>
                            </a>
                        </li>
                    {% endif %}
                        <!--三级菜单-->
                        {% if m2.sub %}
                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                  <i class="far fa-circle nav-icon"></i><p>{{ m2.name }}</p>
                                </a>
                                    <ul class="nav nav-treeview">
                                        {% for m3 in m2.sub %}
                                        <li class="nav-item">
                                            <a href="{{ m3.url }}" class="nav-link">
                                                {{ m3.icon|safe }}<p>{{ m3.name }}</p>
                                            </a>
                                        </li>
                                        {% endfor %}
                                    </ul>
                            </li>
                        {% endif %}
                        <!--/三级菜单-->
                    {% endfor %}
                </ul>
           </li>
           {% endfor %}
        </ul>
      </nav>
    </div>
  </aside>
  <div class="content-wrapper text-sm">
      {% block content %}{% endblock %}
  </div>
  <!-- 主页脚 -->
  <footer class="main-footer text-sm">
    <strong>Copyright &copy; 2020-2029 <a href="">Stronggg</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>
  <aside class="control-sidebar control-sidebar-dark">
  </aside>
</div>
<!-- 样式主题设置js-->
<script src="{% static 'dist/js/demo.js' %}"></script>
<script>
    function SetupHeadPic(){
        layui.use('layer', function () {
            var layer=layui.layer;
            layer.open({
                type:2,   //1是静态内容层，2是iframe层，可用连接
                area: ['650px', '560px'],
                title: '',
                content:"{% url 'login:head_pic' %}",
            })
        })
    }
</script>
<script>
$(document).ready(function() {
  var url = window.location;
  // for sidebar menu entirely but not cover treeview
  $('ul.nav-sidebar a').filter(function() {
      return this.href == url;
  }).addClass('active');
  // for treeview
  $('ul.nav-treeview a').filter(function() {
      return this.href == url;
  }).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
})
</script>
</body>
</html>
